<template>
  <div>
    <!-- breadcrumb-area start -->
    <div class="breadcrumb-area">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="row breadcrumb_box align-items-center">
              <div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-left">
                <h2 class="breadcrumb-title">所有商品</h2>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-12">
                <!-- breadcrumb-list start -->
                <ul class="breadcrumb-list text-center text-md-right">
                  <li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
                  <li class="breadcrumb-item active">所有商品</li>
                </ul>
                <!-- breadcrumb-list end -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- breadcrumb-area end -->

    <!-- Shop Category pages -->
    <div class="shop-category-area pb-100px pt-70px">
      <div class="container">
        <div class="row">
          <div class="col-lg-9 col-md-12">
            <!-- Shop Top Area Start -->
            <div class="shop-top-bar d-flex">
              <!-- Left Side start -->
              <p>这里有{{total}}件商品</p>
              <!-- Left Side End -->
            </div>
            <!-- Shop Top Area End -->

            <!-- Shop Bottom Area Start -->
            <div class="shop-bottom-area">
              <div class="row">
                <div
                  class="col-lg-4 col-md-6 col-sm-6 col-xs-6"
                  data-aos="fade-up"
                  data-aos-delay="200"
                  v-for="(item, index) in books"
                  :key="index"
                >
                  <!-- Single Prodect -->
                  <div class="product mb-5">
                    <div class="thumb">
                      <a  class="image" @click="toInfo(item.id)">
                        <img
                          :src="$store.state.imgURLPre+item.bookImages"
                          alt="Product"
                          width="313px"
                          height="362px"
                        />
                        <!-- <img class="hover-image" src="@/assets/images/product-image/2.jpg" alt="Product" /> -->
                      </a>
                      <span class="badges">
                        <span class="new">New</span>
                      </span>
                      <div class="actions">
                        <a
                          class="action wishlist"
                          title="Wishlist"
                          @click="addWishList(item.id)"
                          > <i class="el-icon-star-on" v-if="wishList.some(e=>e.id===item.id)"></i>
                              <i class="el-icon-star-off" v-else></i></a>
                        <a
                          class="action quickview"
                          title="Quick view"
                          @click="showInfo(item)"
                          ><i
                            class="icon-size-fullscreen"
                            
                          ></i
                        ></a>
                        
                      </div>
                      <button title="Add To Cart" class="add-to-cart" @click="addCart(item.id)">
                        加入购物车
                      </button>
                    </div>
                    <div class="content">
                      <h5 class="title">
                        <a >{{
                          item.bookTitle
                        }}</a>
                      </h5>
                      <span class="price">
                        <span class="new">￥{{ item.bookNewPrice }}</span>
                        <span class="old">￥{{ item.bookOldPrice }}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <!--  Pagination Area Start -->
              <div
                class="pro-pagination-style text-center mb-md-30px mb-lm-30px mt-6"
              >
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-size="pageSize"
                  :page-sizes="[6, 9, 12]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
              <!--  Pagination Area End -->
            </div>
            <!-- Shop Bottom Area End -->
          </div>
          <!-- Sidebar Area Start -->
          <div class="col-lg-3 col-md-12">
            <div class="shop-sidebar-wrap">
              <!-- Sidebar single item -->
              <div class="sidebar-widget">
                <div class="main-heading">
                  <h3 class="sidebar-title">分类</h3>
                </div>
                <div class="sidebar-widget-category">
                  <ul>
                      <li>
                      <a href="#" class="selected" @click="getBooks(0,0)">全部 <span>({{total}})</span> </a>
                    </li>
                    <li v-for="(item,index) in categorys" :key="index">
                      <a href="#" class="selected" @click="getBooks(item.id,0)">{{item.categoryName}}<span></span> </a>
                    </li>
                   
                  </ul>
                </div>
              </div>
              <!-- Sidebar single item -->
              <div class="sidebar-widget-group">
                <h3 class="sidebar-title">筛选条件</h3>
               
                <!-- Sidebar single item -->
                <div class="sidebar-widget">
                  <h4 class="pro-sidebar-title">出版社</h4>
                  <div class="sidebar-widget-list">
                    <ul>
                      <li v-for="(item,index) in publishers" :key="index">
                        <div class="sidebar-widget-list-left">
                          <a href="#" @click="getBooks(0,item.id)">{{item.publisherName}}<span></span> </a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- Sidebar single item -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="50%">
      <div class="modal-body">
        <div class="row">
          <div class="col-md-5 col-sm-12 col-xs-12 mb-lm-30px mb-sm-30px">
            <!-- Swiper -->
            <div class="swiper-container gallery-top mb-4">
              <img
                class="img-responsive m-auto"
                :src="$store.state.imgURLPre+info.bookImages"
                alt=""
              />
            </div>
          </div>
          <div class="col-md-7 col-sm-12 col-xs-12">
            <div class="product-details-content quickview-content">
              <h2>{{info.bookTitle}}</h2>
              <p class="reference">作者:<span>{{info.bookAuthors}}</span></p>
              <div class="pro-details-rating-wrap">
                <div class="rating-product">
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                </div>
                <span class="read-review"
                  ><a class="reviews" href="#">剩余数量({{info.bookQuantityInput-info.bookQuantityOutput}})</a></span
                >
              </div>
              <div class="pricing-meta">
                <ul>
                  <li class="old-price not-cut">￥{{info.bookNewPrice}}</li>
                </ul>
              </div>
              <p class="quickview-para" v-html="info.bookDescribe">
                
              </p>
              
              <div class="pro-details-quality">
                <div class="cart-plus-minus">
                  <input
                    class="cart-plus-minus-box"
                    type="text"
                    name="qtybutton"
                    value="1"
                    v-model="count"
                  />
                </div>
                <div class="pro-details-cart btn-hover">
                  <button
                    class="add-cart btn btn-primary btn-hover-primary ml-4"
                    @click="addCart(info.id,count)"
                  >
                    添加到购物车
                  </button>
                </div>
              </div>
              <div class="pro-details-wish-com">
                <div class="pro-details-wishlist">
                 <a @click="addWishList(info.id)"><i class="el-icon-star-on" v-if="wishList.some(e=>e.id===info.id)">已收藏</i>
                              <i class="el-icon-star-off" v-else>添加到收藏</i></a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
import API from "@/api/request";
const url = "/api/msslyyBook";
export default {
  name: "BookShopShopping",

  components: {},

  directives: {},

  data() {
    return {
      pageNum: 1,
      pageSize: 12,
      total: 0,
      dialogVisible: false,
      books: [],
      categorys: [],
      publishers: [],
      info:{},
      user:{},
      wishList:[],
      count:1,
      categoryId:0,
      publisherId:0,
      text:'',

    };
  },
 
  watch:{
     //监听showcart的变化
    "$store.state.seachText": function () {
      this.getBooks(0,0,false)
    },
  },
  mounted() {},
  created() {
     this.user = sessionStorage.getItem("user1")
      ? JSON.parse(sessionStorage.getItem("user1"))
      : {};
      this.text=this.$route.query.searchText
    this.getBooks(0,0,false);
    this.getAllCategory();
    this.getAllPublisher();
    this.getWishList()
  },

  methods: {
    addCart(bookId,cartAmount=1){
      if (this.user) {
         API.post(`/api/msslyyCart/addCart/${this.user.id}/${bookId}/${cartAmount}`).then((res) => {
          this.$message({
          type: "success",
          message: "添加成功"
          })
          this.count=1
        
      });
      } else {
        this.$message({
          type: "danger",
          message: "请先登录"
        })
      }
    },
    getWishList(){
            API.get(url + "/getBookListById2/"+this.user.id).then(res => {
              if (res.data!==null) {
          this.wishList = res.data|| []
        } else {
          this.wishList=[]
        }
          
       })
      },
    addWishList(bookId){
            if (sessionStorage.getItem("user1")!=null) {
                API.get(`/api/msslyyWishlist/add/${bookId}/${this.user.id}`).then((res) => {
             if (res.code === "0") {
                 if (res.data===1) {
                     this.$message({
                        type: "success",
                        message: "收藏成功"
                        })
                        this.getWishList()
                         this.getBooks();
                 }else{
                    
                     this.$message({
                        type: "info",
                        message: "取消收藏成功"
                        })
                        this.getWishList()
                         this.getBooks();
                 }
                  
            }
            
                });
            } else {
                this.$router.push('/login')
            }
            

        },
      toInfo(id){
          this.$router.push('/shop/bookdetail/'+id)
      },
      showInfo(item){
          this.info=item
          console.log(item);
          this.dialogVisible=true
      },
    getAllCategory() {
      API.get("/api/msslyyCategory").then((res) => {
        if (res.code === "0") {
          this.categorys = res.data;
        }
      });
    },
    getAllPublisher() {
      API.get("/api/msslyyPublisher").then((res) => {
        if (res.code === "0") {
          this.publishers = res.data;
        }
      });
    },
    getBooks(categoryId,publisherId,flag=true) {
      //设置当前第一页
      if (categoryId|publisherId) {
        this.pageNum = 1;
      }
      if (categoryId===0) {
        this.categoryId=0
      }
      if (categoryId) {
        this.categoryId=categoryId
      }
      if (publisherId===0) {
        this.publisherId=0
      }
      if (publisherId) {
        this.publisherId=publisherId
      }
      API.get(url + "/page", {
        params: {
          categoryId:this.categoryId,
          publisherId:this.publisherId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.$store.state.seachText,
        },
      }).then((res) => {
        this.books = res.data.records || [];
        this.total = res.data.total;
      });
      if (flag) {
        this.$store.commit('setSeachTextisNull')
      }
      
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getBooks();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getBooks();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>